<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title>翼家园</title>
    <link rel="shortcut icon" href="favicon.ico"/>
    <link rel="bookmark" href="favicon.ico"/>
    <link rel="stylesheet" href="css/styleUI.css"/>
    <link rel="stylesheet" href="css/screenA.css"/>
    <link rel="stylesheet" href="vendor/fontAwesome/css/font-awesome.min.css"/>
    <script src="js/jquery.min.js"></script>
    <script src="vendor/nicescroll/jquery.nicescroll.min.js"></script>
    <script src="vendor/layer/layer.js"></script>
    <script src="js/echarts.min.js"></script>
    <script src="js/jqResize.js"></script>
    <script src="js/tool.js"></script>
    <script src="js/jqToast.js"></script>
    <script src="js/screenA.js"></script>
    <script src="vendor/paging/page.js"></script>
</head>
<body class="uf uf-ver">
<h1 class="title">智慧社区翼家园</h1>
<a title="返回" href="javascript:void(0);" class="backLink"><i class="fa fa-reply" aria-hidden="true"></i>&nbsp;返回</a>
<div class="timeWeather">
    <div id="dateTime" class="dateTime">2019 年 07 月 04 日 星期四 15:52:36</div>
    <div class="uf">
        <div class="temper infoColor" title="温度">20°C</div>
        <div class="hum infoColor" title="湿度">10%</div>
        <div class="weather infoColor" title="天气">多云</div>
    </div>
</div>
<div class="content uf-f uf uf-pja">
    <div class="left uf uf-ver">
        <div>
            <div class="tit">空气质量检测</div>
            <div class="uf">
                <div class="uf uf-ver uf-ac uf-pja kqzl">
                    <div>空气质量</div>
                    <div>优</div>
                </div>
                <div class="uf-f uf uf-pja">
                    <div class="aglt"></div>
                    <div class="aglb"></div>
                    <div class="agrt"></div>
                    <div class="agrb"></div>
                    <div class="uf uf-ver uf-ac uf-pja">
                        <div>PM2.5</div>
                        <div class="infoColor">11</div>
                    </div>
                    <div class="uf uf-ver uf-ac uf-pja">
                        <div>PM10</div>
                        <div class="infoColor">15</div>
                    </div>
                    <div class="uf uf-ver uf-ac uf-pja">
                        <div>NO</div>
                        <div class="infoColor">11</div>
                    </div>
                    <div class="uf uf-ver uf-ac uf-pja">
                        <div>NO₂</div>
                        <div class="infoColor">11</div>
                    </div>
                    <div class="uf uf-ver uf-ac uf-pja">
                        <div>SO₂</div>
                        <div class="infoColor">10</div>
                    </div>
                    <div class="uf uf-ver uf-ac uf-pja">
                        <div>TVOC</div>
                        <div class="infoColor">6</div>
                    </div>
                </div>
            </div>
        </div>
        <div id="chartsBar" class="chartsBar"></div>
        <div class="uf-f uf">
            <div class="uf uf-ver uf-pj">
                <div id="Gauge1" class="chartsGauge"></div>
                <div id="Gauge2" class="chartsGauge"></div>
            </div>
            <div class="uf-f list uf uf-ver">
                <div class="tit">实时报警列表</div>
                <div class="uf imiTh">
                    <div class="uf-f">报警设备</div>
                    <div class="uf-f">告警内容</div>
                    <div class="uf-f">发生时间</div>
                </div>
                <div id="listBox" class="uf-f u-scrollY">
                    <a href="javascript:void(0);" class="uf imiTd">
                        <div class="uf-f">烟感001</div>
                        <div class="uf-f">烟雾报警</div>
                        <div class="uf-f">2019-07-02</div>
                    </a>
                    <a href="javascript:void(0);" class="uf imiTd">
                        <div class="uf-f">智能插座02</div>
                        <div class="uf-f">异常电流</div>
                        <div class="uf-f">2019-07-02</div>
                    </a>
                    <a href="javascript:void(0);" class="uf imiTd">
                        <div class="uf-f">井盖02</div>
                        <div class="uf-f">倾斜告警</div>
                        <div class="uf-f">2019-07-02</div>
                    </a>
                    <a href="javascript:void(0);" class="uf imiTd">
                        <div class="uf-f">消防栓001</div>
                        <div class="uf-f">水压过低</div>
                        <div class="uf-f">2019-07-02</div>
                    </a>
                    <a href="javascript:void(0);" class="uf imiTd">
                        <div class="uf-f">垃圾桶201</div>
                        <div class="uf-f">满溢告警</div>
                        <div class="uf-f">2019-07-02</div>
                    </a>
                    <a href="javascript:void(0);" class="uf imiTd">
                        <div class="uf-f">烟感001</div>
                        <div class="uf-f">烟雾报警</div>
                        <div class="uf-f">2019-07-02</div>
                    </a>
                    <a href="javascript:void(0);" class="uf imiTd">
                        <div class="uf-f">智能插座02</div>
                        <div class="uf-f">异常电流</div>
                        <div class="uf-f">2019-07-02</div>
                    </a>
                    <a href="javascript:void(0);" class="uf imiTd">
                        <div class="uf-f">井盖02</div>
                        <div class="uf-f">倾斜告警</div>
                        <div class="uf-f">2019-07-02</div>
                    </a>
                    <a href="javascript:void(0);" class="uf imiTd">
                        <div class="uf-f">消防栓001</div>
                        <div class="uf-f">水压过低</div>
                        <div class="uf-f">2019-07-02</div>
                    </a>
                    <a href="javascript:void(0);" class="uf imiTd">
                        <div class="uf-f">垃圾桶201</div>
                        <div class="uf-f">满溢告警</div>
                        <div class="uf-f">2019-07-02</div>
                    </a>
                    <a href="javascript:void(0);" class="uf imiTd">
                        <div class="uf-f">烟感001</div>
                        <div class="uf-f">烟雾报警</div>
                        <div class="uf-f">2019-07-02</div>
                    </a>
                    <a href="javascript:void(0);" class="uf imiTd">
                        <div class="uf-f">智能插座02</div>
                        <div class="uf-f">异常电流</div>
                        <div class="uf-f">2019-07-02</div>
                    </a>
                    <a href="javascript:void(0);" class="uf imiTd">
                        <div class="uf-f">井盖02</div>
                        <div class="uf-f">倾斜告警</div>
                        <div class="uf-f">2019-07-02</div>
                    </a>
                    <a href="javascript:void(0);" class="uf imiTd">
                        <div class="uf-f">消防栓001</div>
                        <div class="uf-f">水压过低</div>
                        <div class="uf-f">2019-07-02</div>
                    </a>
                    <a href="javascript:void(0);" class="uf imiTd">
                        <div class="uf-f">垃圾桶201</div>
                        <div class="uf-f">满溢告警</div>
                        <div class="uf-f">2019-07-02</div>
                    </a>
                    <a href="javascript:void(0);" class="uf imiTd">
                        <div class="uf-f">烟感001</div>
                        <div class="uf-f">烟雾报警</div>
                        <div class="uf-f">2019-07-02</div>
                    </a>
                    <a href="javascript:void(0);" class="uf imiTd">
                        <div class="uf-f">智能插座02</div>
                        <div class="uf-f">异常电流</div>
                        <div class="uf-f">2019-07-02</div>
                    </a>
                    <a href="javascript:void(0);" class="uf imiTd">
                        <div class="uf-f">井盖02</div>
                        <div class="uf-f">倾斜告警</div>
                        <div class="uf-f">2019-07-02</div>
                    </a>
                    <a href="javascript:void(0);" class="uf imiTd">
                        <div class="uf-f">消防栓001</div>
                        <div class="uf-f">水压过低</div>
                        <div class="uf-f">2019-07-02</div>
                    </a>
                    <a href="javascript:void(0);" class="uf imiTd">
                        <div class="uf-f">垃圾桶201</div>
                        <div class="uf-f">满溢告警</div>
                        <div class="uf-f">2019-07-02</div>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="center uf uf-ver">
        <div class="uf uf-pj top">
            <div class="rect uf uf-ver uf-ac uf-pja">
                <div class="aglt"></div>
                <div class="aglb"></div>
                <div class="agrt"></div>
                <div class="agrb"></div>
                <div>总人数</div>
                <div class="ioLine uf">进
                    <div class="uf-f infoColor">800</div>
                </div>
                <div class="ioLine uf">出
                    <div class="uf-f infoColor">800</div>
                </div>
            </div>
            <div class="rect uf uf-ver uf-ac uf-pja">
                <div class="aglt"></div>
                <div class="aglb"></div>
                <div class="agrt"></div>
                <div class="agrb"></div>
                <div>东门</div>
                <div class="ioLine uf">进
                    <div class="uf-f infoColor">200</div>
                </div>
                <div class="ioLine uf">出
                    <div class="uf-f infoColor">200</div>
                </div>
            </div>
            <div class="rect uf uf-ver uf-ac uf-pja">
                <div class="aglt"></div>
                <div class="aglb"></div>
                <div class="agrt"></div>
                <div class="agrb"></div>
                <div>南门</div>
                <div class="ioLine uf">进
                    <div class="uf-f infoColor">200</div>
                </div>
                <div class="ioLine uf">出
                    <div class="uf-f infoColor">200</div>
                </div>
            </div>
            <div class="rect uf uf-ver uf-ac uf-pja">
                <div class="aglt"></div>
                <div class="aglb"></div>
                <div class="agrt"></div>
                <div class="agrb"></div>
                <div>西门</div>
                <div class="ioLine uf">进
                    <div class="uf-f infoColor">200</div>
                </div>
                <div class="ioLine uf">出
                    <div class="uf-f infoColor">200</div>
                </div>
            </div>
            <div class="rect uf uf-ver uf-ac uf-pja">
                <div class="aglt"></div>
                <div class="aglb"></div>
                <div class="agrt"></div>
                <div class="agrb"></div>
                <div>北门</div>
                <div class="ioLine uf">进
                    <div class="uf-f infoColor">200</div>
                </div>
                <div class="ioLine uf">出
                    <div class="uf-f infoColor">200</div>
                </div>
            </div>
        </div>
        <div class="uf-f cDiv">
            <div id="mapDiv" class="tapCon">
                <div class="loadingText"><i class="fa fa-spinner fa-pulse" aria-hidden="true"></i>&nbsp;加载中...</div>
                <div class="mapMarkers">
                    <div class="mapMark mark0"></div>
                    正常
                    <div class="mapMark mark1"></div>
                    告警
                    <div class="mapMark mark2"></div>
                    离线
                    <div class="mapMark mark3"></div>
                    使用中
                </div>
            </div>
            <div id="videoDiv" class="tapCon">
                <div class="uf crossLine">
                    <div class="uf-f crossBox">
                        <video width="100%" height="100%" autoplay loop muted>
                            <source src="https://www.runoob.com/try/demo_source/movie.mp4" type="video/mp4">
                            <source src="https://www.runoob.com/try/demo_source/movie.ogg" type="video/ogg">
                            您的浏览器不支持 video 标签。
                        </video>
                        <div class="videoTit">东门</div>
                    </div>
                    <div class="uf-f crossBox">
                        <video width="100%" height="100%" autoplay loop muted>
                            <source src="https://www.runoob.com/try/demo_source/movie.mp4" type="video/mp4">
                            <source src="https://www.runoob.com/try/demo_source/movie.ogg" type="video/ogg">
                            您的浏览器不支持 video 标签。
                        </video>
                        <div class="videoTit">南门</div>
                    </div>
                </div>
                <div class="uf crossLine">
                    <div class="uf-f crossBox">
                        <video width="100%" height="100%" autoplay loop muted>
                            <source src="https://www.runoob.com/try/demo_source/movie.mp4" type="video/mp4">
                            <source src="https://www.runoob.com/try/demo_source/movie.ogg" type="video/ogg">
                            您的浏览器不支持 video 标签。
                        </video>
                        <div class="videoTit">西门</div>
                    </div>
                    <div class="uf-f crossBox">
                        <video width="100%" height="100%" autoplay loop muted>
                            <source src="https://www.runoob.com/try/demo_source/movie.mp4" type="video/mp4">
                            <source src="https://www.runoob.com/try/demo_source/movie.ogg" type="video/ogg">
                            您的浏览器不支持 video 标签。
                        </video>
                        <div class="videoTit">北门</div>
                    </div>
                </div>
            </div>
            <div id="picDiv" class="tapCon active">
                <div class="conContent uf uf-ver">
                    <div class="mark">
                        <div class="img type1"></div>
                        内部人员
                        <div class="img type2"></div>
                        外部访客
                        <div class="img type3"></div>
                        危险分子
                    </div>
                    <div class="uf-f uf">
                        <div class="visDiv uf uf-ver">
                            <div class="title">视频照片</div>
                            <div class="uf-f img active">
                                <img id="visPic" src="img/pics/v1.png"/>
                                <div class="ori">采集地点：<span id="jPoint">南门</span></div>
                                <div class="time">采集时间：<span id="jTime">2019-07-01 19:21</span></div>
                            </div>
                        </div>
                        <div class="uf-f picsDiv uf uf-ver">
                            <div class="title">出入口人脸记录</div>
                            <div class="uf-f">
                                <div class="active img lf type3"><img src="img/pics/1.png"/></div>
                                <div class="img lf type1"><img src="img/pics/2.png"/></div>
                                <div class="img lf type1"><img src="img/pics/3.png"/></div>
                                <div class="img lf type1"><img src="img/pics/4.png"/></div>
                                <div class="img lf type1"><img src="img/pics/5.png"/></div>
                                <div class="img lf type2"><img src="img/pics/6.png"/></div>
                                <div class="img lf type1"><img src="img/pics/7.png"/></div>
                                <div class="img lf type1"><img src="img/pics/8.png"/></div>
                                <div class="img lf type1"><img src="img/pics/9.png"/></div>
                                <div class="img lf type1"><img src="img/pics/10.png"/></div>
                            </div>
                            <div id="paging" class="uf uf-pc uf-ac">......</div>
                        </div>
                    </div>
                    <div class="tarPics uf uf-ver">
                        <div class="title">登记库相似人脸</div>
                        <div class="uf-f uf">
                            <div class="uf-f tar uf">
                                <div class="img"><img src="img/pics/1.png"/>
                                </div>
                                <div class="uf-f">
                                    <div class="infoLine">姓名：<span class="name">张三</span></div>
                                    <div class="infoLine">身份信息：<span class="info">嫌疑犯</span></div>
                                    <div class="infoLine">登记时间：<span class="time">2018-12-06</span></div>
                                    <div class="infoLine">相似度：<span class="percent">99%</span></div>
                                </div>
                            </div>
                            <div class="uf-f tar uf">
                                <div class="img"><img src="img/pics/a5.png"/>
                                </div>
                                <div class="uf-f">
                                    <div class="infoLine">姓名：<span class="name">李四</span></div>
                                    <div class="infoLine">身份信息：<span class="info">暗访记者</span></div>
                                    <div class="infoLine">登记时间：<span class="time">2018-09-06</span></div>
                                    <div class="infoLine">相似度：<span class="percent">90%</span></div>
                                </div>
                            </div>
                            <div class="uf-f tar uf">
                                <div class="img"><img src="img/pics/a2.png"/>
                                </div>
                                <div class="uf-f">
                                    <div class="infoLine">姓名：<span class="name">王超</span></div>
                                    <div class="infoLine">身份信息：<span class="info">失踪人员</span></div>
                                    <div class="infoLine">登记时间：<span class="time">2019-06-06</span></div>
                                    <div class="infoLine">相似度：<span class="percent">80%</span></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="conTap uf">
                <div id="mapDivBtn" class="tapBtn">社区地图</div>
                <div id="videoDivBtn" class="tapBtn">视频监控</div>
                <div id="picDivBtn" class="tapBtn active">人脸识别</div>
            </div>
        </div>
    </div>
    <div class="right uf uf-ver uf-pj">
        <div class="uf uf-pj">
            <div class="box uf uf-ver uf-pe">
                <div id="pie1" data-title="烟感" class="pie"></div>
                <div class="uf uf-pj boxStatus">
                    <div>
                        <div class="point">已停止</div>
                        <div class="number">10</div>
                    </div>
                    <div>
                        <div class="point">运行中</div>
                        <div class="number">10</div>
                    </div>
                </div>
                <div class="boxBtns">
                    <!--<a class="boxBtn" href="javascript:mapCut();">地图</a>-->
                    <a class="boxBtn" href="javascript:void (0);">管理</a>
                </div>
            </div>
            <div class="box uf uf-ver uf-pe">
                <div id="pie2" data-title="消防栓" class="pie"></div>
                <div class="uf uf-pj boxStatus">
                    <div>
                        <div class="point">已停止</div>
                        <div class="number">10</div>
                    </div>
                    <div>
                        <div class="point">运行中</div>
                        <div class="number">10</div>
                    </div>
                </div>
                <div class="boxBtns">
                    <!--<a class="boxBtn" href="javascript:mapCut();">地图</a>-->
                    <a class="boxBtn" href="javascript:void (0);">管理</a>
                </div>
            </div>
            <div class="box uf uf-ver uf-pe">
                <div id="pie3" data-title="垃圾桶" class="pie"></div>
                <div class="uf uf-pj boxStatus">
                    <div>
                        <div class="point">已停止</div>
                        <div class="number">10</div>
                    </div>
                    <div>
                        <div class="point">运行中</div>
                        <div class="number">10</div>
                    </div>
                </div>
                <div class="boxBtns">
                    <!--<a class="boxBtn" href="javascript:mapCut();">地图</a>-->
                    <a class="boxBtn" href="javascript:void (0);">管理</a>
                </div>
            </div>
        </div>
        <div class="uf uf-pj">
            <div class="box uf uf-ver uf-pe">
                <div id="pie4" data-title="井盖" class="pie"></div>
                <div class="uf uf-pj boxStatus">
                    <div>
                        <div class="point">已停止</div>
                        <div class="number">10</div>
                    </div>
                    <div>
                        <div class="point">运行中</div>
                        <div class="number">10</div>
                    </div>
                </div>
                <div class="boxBtns">
                    <!--<a class="boxBtn" href="javascript:mapCut();">地图</a>-->
                    <a class="boxBtn" href="javascript:void (0);">管理</a>
                </div>
            </div>
            <div class="box uf uf-ver uf-pe">
                <div id="pie5" data-title="充电桩" class="pie"></div>
                <div class="uf uf-pj boxStatus">
                    <div>
                        <div class="point">已停止</div>
                        <div class="number">10</div>
                    </div>
                    <div>
                        <div class="point">运行中</div>
                        <div class="number">10</div>
                    </div>
                </div>
                <div class="boxBtns">
                    <!--<a class="boxBtn" href="javascript:mapCut();">地图</a>-->
                    <a class="boxBtn" href="javascript:void (0);">管理</a>
                </div>
            </div>
            <div class="box uf uf-ver uf-pe">
                <div id="pie6" data-title="摄像头" class="pie"></div>
                <div class="uf uf-pj boxStatus">
                    <div>
                        <div class="point">已停止</div>
                        <div class="number">10</div>
                    </div>
                    <div>
                        <div class="point">运行中</div>
                        <div class="number">10</div>
                    </div>
                </div>
                <div class="boxBtns">
                    <!--<a class="boxBtn" href="javascript:mapCut();">地图</a>-->
                    <a class="boxBtn" href="javascript:void (0);">管理</a>
                </div>
            </div>
        </div>
        <div class="uf uf-pj">
            <div class="box uf uf-ver uf-pe">
                <div id="pie7" data-title="公共照明" class="pie"></div>
                <div class="uf uf-pj boxStatus">
                    <div>
                        <div class="point">已停止</div>
                        <div class="number">10</div>
                    </div>
                    <div>
                        <div class="point">运行中</div>
                        <div class="number">10</div>
                    </div>
                </div>
                <div class="boxBtns">
                    <!--<a class="boxBtn" href="javascript:mapCut();">地图</a>-->
                    <a class="boxBtn" href="javascript:void (0);">管理</a>
                </div>
            </div>
            <div class="box uf uf-ver uf-pe">
                <div id="pie8" data-title="智能插座" class="pie"></div>
                <div class="uf uf-pj boxStatus">
                    <div>
                        <div class="point">已停止</div>
                        <div class="number">10</div>
                    </div>
                    <div>
                        <div class="point">运行中</div>
                        <div class="number">10</div>
                    </div>
                </div>
                <div class="boxBtns">
                    <!--<a class="boxBtn" href="javascript:mapCut();">地图</a>-->
                    <a class="boxBtn" href="javascript:void (0);">管理</a>
                </div>
            </div>
            <div class="box uf uf-ver uf-pe">
                <div id="pie9" data-title="电梯" class="pie"></div>
                <div class="uf uf-pj boxStatus">
                    <div>
                        <div class="point">已停止</div>
                        <div class="number">10</div>
                    </div>
                    <div>
                        <div class="point">运行中</div>
                        <div class="number">10</div>
                    </div>
                </div>
                <div class="boxBtns">
                    <!--<a class="boxBtn" href="javascript:mapCut();">地图</a>-->
                    <a class="boxBtn" href="javascript:void (0);">管理</a>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    $(function () { //列表滚动
        var listBox = document.getElementById("listBox");
        // console.log(listBox.scrollTop, listBox.offsetHeight, listBox.scrollHeight);
        var intervalScroll;
        var setTime1;
        var setTime2;

        function startScroll() { // 开始滚动
            if (listBox.offsetHeight < listBox.scrollHeight) {
                intervalScroll = setInterval(function () {
                    if ((listBox.scrollTop + listBox.offsetHeight) < listBox.scrollHeight) {
                        listBox.scrollTop++;
                    } else {
                        clearInterval(intervalScroll);
                        setTime1 = setTimeout(function () {
                            $(listBox).animate({scrollTop: 0}, 'fast');
                        }, 3000);
                        setTime2 = setTimeout(startScroll, 5000);
                    }
                }, 30);
            }
        }

        $(listBox).hover(function () {
            clearInterval(intervalScroll);
            clearTimeout(setTime1);
            clearTimeout(setTime2);
        }, startScroll);

        startScroll();
    });
</script>
<script>
    $(function () { //绘制图表
        var data1 = [320, 332, 301, 334, 90, 260, 320, 332, 301, 334, 260, 160];
        var data2 = [220, 182, 191, 234, 390, 290, 260, 320, 332, 301, 390, 260];
        drawBar("chartsBar", "24小时出入人数统计", data1, data2);

        drawGauge("Gauge1", "设备告警率", 0);
        drawGauge("Gauge2", "设备完好率", 90, true);

        drawPie("pie1", 75, "#5BF1FD");
        drawPie("pie2", 85, "#FFD982");
        drawPie("pie3", 75, "#FF8274");
        drawPie("pie4", 95, "#A26EEF");
        drawPie("pie5", 75, "#F6D74B");
        drawPie("pie6", 85, "#6AFE6B");
        drawPie("pie7", 85, "#EF24DD");
        drawPie("pie8", 95, "#FF7B00");
        drawPie("pie9", 100, "#05E0C3");
    });
</script>
<script src="//webapi.amap.com/maps?v=1.4.15&key=d09ab504ad2e0432b952109318e79dd2&plugin=AMap.MarkerClusterer,AMap.ControlBar"></script>
<script>
    var map, markers = [], cluster, infoWindow,
        zoomMin = 3,
        zoomMax = 18,
        zoomNumber = 17, //IE下设置浮点数会导致地图初始加载时卡顿
        tarZoom = 18, normalInfoZoom = 16.8,
        centerPoint = [120.191081, 30.227269];

    var ua = navigator.userAgent.toLocaleLowerCase();
    if (ua.match(/chrome/) != null) { //chrome内核支持扩展最大缩放级别20
        zoomMax = 20;
    }

    //初始化地图
    function mapInit() {
        map = new AMap.Map("mapDiv", { //初始化地图
            resizeEnable: true, //是否监控地图容器尺寸变化，默认值为false
            rotateEnable: true, //是否允许设置地图顺时针旋转角度
            pitchEnable: true, //是否允许设置俯仰角度，3D视图下为true，2D视图下无效。（自V1.4.0开始支持）
            viewMode: '3D', //开启3D视图,默认为关闭
            buildingAnimation: true, //楼块出现是否带动画
            expandZoomRange: true, //是否支持可以扩展最大缩放级别,和zooms属性配合使用，设置为true的时候，zooms的最大级别在PC上可以扩大到20级，移动端还是高清19/非高清20
            zooms: [zoomMin, zoomMax], //地图显示的缩放级别范围，在PC上，默认为[3,18]，取值范围[3-18]；在移动设备上，默认为[3,19],取值范围[3-19]
            zoom: zoomNumber, //地图显示的缩放级别，若center与level未赋值，地图初始化默认显示用户所在城市范围，3D地图下，zoom值，可以设置为浮点数（IE下设置浮点数会导致地图初始加载时卡顿）。
            center: centerPoint, //地图中心点
            mapStyle: "amap://styles/blue"
        });
        map.on('complete', function () { //地图加载完成的回调

            map.addControl(new AMap.ControlBar({ //可控制方向标 点击会还原地图状态
                showZoomBar: false, //是否显示缩放按钮
                showControlButton: false, //是否显示方向控制按钮
                position: {
                    top: '40px',
                    right: '20px'
                }
            }));

            var dataMap = [
                {
                    "name": "设备001",
                    "status": 0,
                    "statusMsg": "正常",
                    "longlat": [120.191244, 30.227846]
                },
                {
                    "name": "设备002",
                    "status": 1,
                    "statusMsg": "消防栓水压过低告警",
                    "longlat": [120.190791, 30.227179]
                },
                {
                    "name": "设备003",
                    "status": 2,
                    "statusMsg": "离线",
                    "longlat": [120.192338, 30.226683]
                },
                {
                    "name": "设备004",
                    "status": 0,
                    "statusMsg": "正常",
                    "longlat": [120.189732, 30.226476]
                },
                {
                    "name": "设备005",
                    "status": 0,
                    "statusMsg": "正常",
                    "longlat": [120.189078, 30.227242]
                },
                {
                    "name": "设备006",
                    "status": 3,
                    "statusMsg": "正在使用",
                    "longlat": [120.190045, 30.227937]
                },
                {
                    "name": "设备006",
                    "status": 0,
                    "statusMsg": "正常",
                    "longlat": [120.191013, 30.226401]
                },
                {
                    "name": "设备007",
                    "status": 0,
                    "statusMsg": "正常",
                    "longlat": [120.191851, 30.227074]
                },
                {
                    "name": "设备008",
                    "status": 0,
                    "statusMsg": "正常",
                    "longlat": [120.192449, 30.227825]
                }
            ];

            $.each(dataMap, function (i, it) {

                var styleClass = "mapMark ";
                switch (it.status) {
                    case 0:
                        styleClass = styleClass + "mark0";
                        break;
                    case 1:
                        styleClass = styleClass + "mark1";
                        break;
                    case 2:
                        styleClass = styleClass + "mark2";
                        break;
                    case 3:
                        styleClass = styleClass + "mark3";
                        break;
                }

                markers.push(new AMap.Marker({
                    // animation: "AMAP_ANIMATION_DROP",
                    position: it.longlat,
                    // icon:'http://webapi.amap.com/theme/v1.3/markers/n/mark_bs.png', //蓝色图标 默认
                    // icon:'http://webapi.amap.com/theme/v1.3/markers/n/mark_rs.png', //红色图标
                    content: '<div class="' + styleClass + '"></div>',
                    offset: new AMap.Pixel(-6, -6),
                    extData: {
                        name: it.name,
                        status: it.status,
                        statusMsg: it.statusMsg
                    },
                    map: map
                }));

                // markers.push(new AMap.CircleMarker({
                //     center: it.longlat,
                //     radius: 7,//3D视图下，CircleMarker半径不要超过64px
                //     strokeWeight: 1, //描边宽度
                //     fillColor: color, //填充色
                //     strokeColor: color, //描边色
                //     fillOpacity: 0.5,
                //     strokeOpacity: 0.8,
                //     zIndex: 10,
                //     bubble: false, //否将覆盖物的鼠标或touch等事件冒泡到地图上
                //     cursor: 'pointer',
                //     extData: {
                //         name: it.name,
                //         status: it.status,
                //         statusMsg: it.statusMsg
                //     },
                //     map: map
                // }));

            });

            infoWindow = new AMap.InfoWindow(); //信息窗口对象

            $.each(markers, function (i, it) {
                it.on("click", function (o) {
                    var thisMarker = o.target;
                    var geoLonLat = thisMarker.getPosition ? thisMarker.getPosition() : thisMarker.getCenter();

                    var mapGetZoom = map.getZoom(); //地图当前缩放值
                    if (mapGetZoom < tarZoom) {
                        map.setZoomAndCenter(tarZoom, geoLonLat); //地图缩放到指定大小和位置
                    }

                    var extData = thisMarker.getExtData(); //获取额外参数
                    // console.log(extData);
                    var infoHtml = '<div style="min-width: 180px;">'
                        + '<div style="padding: 5px 5px 5px 0;font-size: 12px;">设备名称：' + extData.name + '</div>'
                        + '<div style="padding: 0 5px 0 0;font-size: 12px;">设备状态：' + extData.statusMsg + '</div>'
                        + '<a href="javascript:void(0);" style="padding: 5px 5px 5px 0;font-size: 12px;color: #0c60ee;cursor: pointer;">查看详情>></a>'
                        + '</div>';
                    infoWindow.setContent(infoHtml);
                    infoWindow.open(map, geoLonLat);

                });
            });

            if (cluster) { //如果存在，则先清空
                cluster.setMap(null);
            }
            if (markers && markers.length) {
                cluster = new AMap.MarkerClusterer(map, markers); //点聚合
                cluster.on('click', function () {
                    // console.log("cluster", arguments)
                });
            }

            //地图点击事件
            map.on('click', function (e) {
                console.log(e.lnglat.getLng() + "," + e.lnglat.getLat());
                if (infoWindow) { //点击地图关闭信息窗口
                    infoWindow.close();
                }
            });

            //地图缩放事件
            map.on('zoomchange', function () {
                var curZoom = map.getZoom();
                if (curZoom < normalInfoZoom && infoWindow) { //小于正常可显示信息窗口的缩放值时，关闭信息窗口
                    infoWindow.close();
                }
            });

        });
    }

    $(function () {

        mapInit();//初始化地图

        //切换地图显示设备点
        function mapCut(e) {
            if (infoWindow) { //关闭信息窗口
                infoWindow.close();
            }
            var typeName = (e.attr("data-title"));
            $("#mapDivBtn").click(); //切换地图显示

            //todo
            jqOpenToast("地图显示【" + typeName + "】设备点分布");
        }

        //点击设备环状图
        $(".pie").click(function (e) {
            if ($(e.target).hasClass("boxBtn")) {
                return;
            }
            mapCut($(this));
        });


        //点击人脸记录
        $(".picsDiv").on("click", ".img.lf", function (e) {
            var $this = $(this);
            if ($this.hasClass("active")) return;

            $(".img.lf").removeClass("active");
            $this.addClass("active");

            //todo 切换左侧视频图片和底部相似图片
            //模拟切换
            var $visPic = $("#visPic");
            var $jPoint = $("#jPoint");
            var $jTime = $("#jTime");
            var $tar = $(".tar");
            var picUrl = $visPic.attr("src");
            var path;
            path = picUrl.substring(0, picUrl.lastIndexOf("/") + 1);
            switch ($this.index()) {
                case 0:
                    $visPic.attr("src", path + "v1.png");
                    $jPoint.text("南门");
                    $jTime.text("2019-07-01 19:21");
                    $($tar[0]).find("img").attr("src", path + "1.png");
                    $($tar[0]).find(".name").text("张三");
                    $($tar[0]).find(".info").text("嫌疑犯");
                    $($tar[0]).find(".time").text("2018-12-06");
                    $($tar[0]).find(".percent").text("99%");
                    $($tar[1]).find("img").attr("src", path + "a5.png");
                    $($tar[1]).find(".name").text("李四");
                    $($tar[1]).find(".info").text("暗访记者");
                    $($tar[1]).find(".time").text("2018-09-06");
                    $($tar[1]).find(".percent").text("90%");
                    $($tar[2]).find("img").attr("src", path + "a1.png");
                    $($tar[2]).find(".name").text("王超");
                    $($tar[2]).find(".info").text("失踪人员");
                    $($tar[2]).find(".time").text("2019-06-06");
                    $($tar[2]).find(".percent").text("80%");
                    break;
                case 1:
                    $visPic.attr("src", path + "v2.png");
                    $jPoint.text("北门");
                    $jTime.text("2019-07-01 18:20");
                    $($tar[0]).find("img").attr("src", path + "2.png");
                    $($tar[0]).find(".name").text("王朝东");
                    $($tar[0]).find(".info").text("住户");
                    $($tar[0]).find(".time").text("2018-12-06");
                    $($tar[0]).find(".percent").text("99%");
                    $($tar[1]).find("img").attr("src", path + "a2.png");
                    $($tar[1]).find(".name").text("赵龙");
                    $($tar[1]).find(".info").text("住户");
                    $($tar[1]).find(".time").text("2018-12-07");
                    $($tar[1]).find(".percent").text("90%");
                    $($tar[2]).find("img").attr("src", path + "a4.png");
                    $($tar[2]).find(".name").text("马六");
                    $($tar[2]).find(".info").text("重要领导");
                    $($tar[2]).find(".time").text("2018-12-09");
                    $($tar[2]).find(".percent").text("79%");
                    break;
            }
        });

        $('#paging').page({
            len: 500, //分页总数
            firstPage: '首页', //按钮内容，可以是html标签
            lastPage: '末页', //按钮内容，可以是html标签
            prv: '上一页', //按钮内容，可以是html标签
            next: '下一页', //按钮内容，可以是html标签
            clickBack: function (page) {
                console.log("页码：" + page);
                //todo 分页
            }
        })

    });
</script>
</body>
</html>